<template>
  <div>
    <!-- 面包屑导航栏 start -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item class="index" :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面包屑导航栏 end -->
    <!-- 卡片主体区 start -->
    <el-card>
      <!-- 角色信息表格 start -->
      <el-table :data="roleList" height="250" border stripe style="width: 100%; min-height: 420px" max-height="420px">
        <!-- 索引列 -->
        <el-table-column type="index"> </el-table-column>
        <!-- 具体信息 -->
        <el-table-column prop="rname" width="120px" label="角色名称"> </el-table-column>
        <el-table-column prop="descs" label="角色描述"> </el-table-column>
      </el-table>
      <!-- 角色信息表格 end -->
    </el-card>
    <!-- 卡片主体区 end -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 角色列表
      roleList: []
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    async getRoleList() {
      //   获取角色信息
      const res = await this.$http.post('getAllRole')
      if (res.data) {
        this.roleList = res.data
      } else {
        this.$message.error('获取角色信息失败！')
      }
    }
  }
}
</script>

<style lang="less" scoped>
// 标签样式
.el-tag-height {
  margin: 10px 0px 10px 95px;
}
.el-tag-low {
  margin: 10px 0px 10px 10px;
}
// 折叠行样式
.el-row-top {
  border-top: 1px solid #eee;
}
.el-row-buttom {
  border-bottom: 1px solid #eee;
}
// 权限标签样式
.vcenter {
  display: flex;
  align-items: center;
}
// 无权限展示信息区
.no-right {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 15px;
  color: #409f3f;
}
// 箭头图标样式
.el-icon-caret-right {
  margin-left: 10px;
}
// 树结构样式
.search {
  width: 70%;
  margin: 10px 0px;
}
</style>
